import React,{memo} from 'react';
import styled from 'styled-components';

interface IUser {
  name: string;
  age: number;
}
function Child(props: { user: IUser }) {
  console.log('render');
  const { name, age } = props.user;
  const style = {
    width: '100px',
    height: '100px',
    backgroundColor: 'skyblue',
    padding: '5px',
  };
  return (
    <div style={style}>
      <p>姓名：{name}</p>
      <p>年龄：{age}</p>
    </div>
  );
}
// React.memo 是一个 React API，用于优化性能。
// 它通过记忆上一次的渲染结果，仅当 props 发生变化时才会重新渲染, 避免重新渲染

const MemoChild = memo(Child);
export default function memoComp() {
  const [user, setUser] = useState<IUser>({
    name: 'ccc',
    age: 18,
  });
  const [inpVal, setInpVal] = useState('');
  return (
    <Wrapper>
      <div className="memo">
        <button onClick={()=>{
          setUser({
            name: 'jk',
            age: 19
          });
        }}>改变user</button>
        <input type="text" value={inpVal} onChange={(e) => setInpVal(e.target.value)} />
        {/* <Child user={user} /> */}
        <MemoChild user={user} />
      </div>
    </Wrapper>
  );
}
const Wrapper = styled.div`
  .memo {
    color: #000;
  }
`;
